<template>
  <div>
    <el-container>
      <el-header>
        <span>项目编号：&nbsp;</span>
        <span>{{this.$route.query.projectCode}}</span>
         &nbsp;
        <span>项目名称： &nbsp;</span>
        <span>{{this.$route.query.projectName}}</span>
         &nbsp;
        <span>采购类别：&nbsp;</span>
       <span>{{this.$route.query.purchaseCategoryName}}</span>
        &nbsp;
        <span>预算金额：&nbsp;</span>
        <span>{{this.$route.query.budget}}元</span>
    &nbsp;

 </el-header>
  <el-main>
    <div class="div1">
    <span>供应商签到表</span>  <el-button :disabled="ishide3" type="primary" @click="createsupplierfile">生成供应商签到表</el-button>
    <el-table
        :data="supplierData1"
        border
        style="width: 100%">
      <el-table-column
          prop="generateTime"
          label="生成时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="filename"
          label="文件名"
          width="230">
      </el-table-column>
      <el-table-column
          prop=""
          label="操作"
          width="140">
        <template slot-scope="scope">
        <el-button type="text" @click="downloadsupplier(scope.$index,scope.row)" >下载</el-button>
        <el-button :disabled="ishide3" type="text" @click="deletesupplierfile1(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="div2">
    <span>采购小组签到表</span> <el-button :disabled="ishide3" type="primary" @click="createpurchasegroupfile">生成采购小组签到表</el-button>
    <el-table
        :data="purchaseData1"
        border
        style="width: 100%">
      <el-table-column
          prop="generateTime"
          label="生成时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="filename"
          label="文件名"
          width="230">
      </el-table-column>
      <el-table-column
          prop=""
          label="操作"
          width="140">
        <template slot-scope="scope">
        <el-button type="text" @click="downloadpurchase(scope.$index,scope.row)" >下载</el-button>
        <el-button type="text" :disabled="ishide3" @click="deletepurchasefile1(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <hr style="color: rgb(173,173,173)" size="1">
    <div class="div3">
      <span style="float:left;position: relative;top:0px;">签章后的供应商签到表</span>
    <el-upload
        class="upload-demo inline-block margin-right-10"
        ref="uploadsupplierfile"
        accept=".pdf"
        :on-change="handleChange1"
        :auto-upload="false"
        :multiple="false"
        :file-list="filelist1"
        style="float:left;position: relative;top:0px;left:15px;"
    >
      <el-button type="primary" :disabled="ishide3">上传签字后的供应商签到表</el-button>
    </el-upload>
    &nbsp;
    <el-button v-if="(this.file1 === null) ? false : true" type="primary" @click="uploadsupplierfile" style="float:left;position: relative;left: 20px;top:12px;">确认上传</el-button>

<div>
    <el-progress v-if="ishide1"   :percentage="percent1"
    style="width: 500px"
    ></el-progress>
</div>

    <el-table
        :data="supplierData2"
        border
        style="width: 100%">
      <el-table-column
          prop="generateTime"
          label="上传时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="filename"
          label="文件名"
          width="230">
      </el-table-column>
      <el-table-column
          prop=""
          label="操作"
          width="140">
        <template slot-scope="scope">
          <el-button type="text" @click="downloadsupplier(scope.$index,scope.row)" >下载</el-button>
          <el-button type="text" :disabled="ishide3" @click="deletesupplierfile2(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="div4">
      <span style="float:left;position: relative;top:0px;">签章后的采购小组签到表</span>
    <el-upload
        ref="uploadpurchasefile"
        class="upload-demo inline-block margin-right-10"
        action=""
        accept=".pdf"
        :on-change="handleChange2"
        :auto-upload="false"
        :multiple="false"
        :file-list="filelist2"
        style="float:left;position: relative;top:0px;left: 15px;"
    >
      <el-button type="primary" :disabled="ishide3" >上传签字后的采购小组签到表</el-button>
    </el-upload>
    &nbsp;
    <el-button v-if="(this.file2 === null) ? false : true" type="primary" @click="uploadpurchasefile" style="float:left;position: relative;left: 20px;top:12px;">确认上传</el-button>
    <div>
    <el-progress v-if="ishide2"  :percentage="percent2"
    style="width:500px;"
    ></el-progress>
    </div>
    <el-table
        :data="purchaseData2"
        border
        style="width: 100%">
      <el-table-column
          prop="generateTime"
          label="上传时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="filename"
          label="文件名"
          width="230">
      </el-table-column>
      <el-table-column
          prop=""
          label="操作"
          width="140">
        <template slot-scope="scope">
          <el-button type="text" @click="downloadpurchase(scope.$index,scope.row)" >下载</el-button>
          <el-button type="text" :disabled="ishide3" @click="deletepurchasefile2(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </el-main>
  <el-footer>
    <el-button type="primary" @click="goBack">返回</el-button>
  </el-footer>
</el-container>
</div>
</template>

<script>
import request from "@/utils/request";
import {MessageBox} from "element-ui";
import Vue from "vue";
Vue.prototype.$confirm = MessageBox.confirm

export default {
  name: "index",
  created() {
    console.log(this.$route.query)
    this.onload()
  },
  methods: {
    async onload() {
      let data = {}
      data['projectId'] = this.$route.query['projectId']
      let res = await request(
          {
            url: "/AttendanceSheet/manage",
            method: "post",
            data: data
          }
      )
      console.log(res.data.data)
      this.supplierData1 = res.data.data.supplier
      this.supplierData2 = res.data.data.suppliered
      this.purchaseData1 = res.data.data.purchasegroup
      this.purchaseData2= res.data.data.purchasegrouped
      if (this.$route.query.archiveSubmitStatus==="已提交"){
        this.ishide3=true
      }
    },

    goBack() {
      this.$router.go(-1)
    },
    async createsupplierfile(){
      let data={}
      data['projectId']=this.$route.query['projectId']
      let res=await request(
          {
            url: "/AttendanceSheet/createsupplierfile",
            method: "post",
            data:data
          },

      )
      if(res.data.code===200){
        this.$message({
          message:"生成成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"生成失败",
          type:"error"
        })
      }
      await this.onload();
    },
    async createpurchasegroupfile(){
      let data={}
      data['projectId']=this.$route.query['projectId']
      let res=await request(
          {
            url: "/AttendanceSheet/createpurchasegroupfile",
            method: "post",
            data:data
          },
      )
      if(res.data.code===200){
        this.$message({
          message:"生成成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"生成失败",
          type:"error"
        })
      }
      await this.onload();
    },
    async downloadsupplier(index,row){
      let data={
        'filename':row.filename,
        'filePath':row.filePath
      }
      let res=await request(
          {
            url: "/AttendanceSheet/downloadsupplier",
            method: "post",
            responseType: 'blob',
            data:data
          }
      )
      console.log(res.data)
      let blob = new Blob([res.data], {type: 'application/octet-stream'})
      // 创建一个临时的URL，用于下载文件
      let url = window.URL.createObjectURL(blob)
      // 创建一个a标签，指定下载链接和文件名
      let link = document.createElement('a')
      link.href = url
      link.download = row.filename // 这里可以根据实际情况指定文件名和扩展名
      // 触发a标签的点击事件，开始下载文件
      link.click()
      // 释放URL资源
      window.URL.revokeObjectURL(url)
    },
    async downloadpurchase(index,row){
      let data={
        'filename':row.filename,
        'filePath':row.filePath
      }
      let res=await request(
          {
            url: "/AttendanceSheet/downloadpurchase",
            method: "post",
            data:data
          }
      )
      let blob = new Blob([res.data], {type: 'application/octet-stream'})
      // 创建一个临时的URL，用于下载文件
      let url = window.URL.createObjectURL(blob)
      // 创建一个a标签，指定下载链接和文件名
      let link = document.createElement('a')
      link.href = url
      link.download = row.filename // 这里可以根据实际情况指定文件名和扩展名
      // 触发a标签的点击事件，开始下载文件
      link.click()
      // 释放URL资源
      window.URL.revokeObjectURL(url)
    },
    async deletesupplierfile1(index,row){
      const confirmResult =  await  this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        // 指定确认按钮的文本
        confirmButtonText: '确定',
        //指定取消按钮的文本
        cancelButtonText: '取消',
        //通过type指定提示信息前面的小图标
        type: 'warning'
      }).catch(err=>{
        // 这个捕获一下错误，要不然我们点击“取消”按钮之后控制台会报错
        return err
      })
      // console.log(confirmResult)

      if(confirmResult !=='confirm'){
        // 说明用户不想删除
        return this.$message.info('已取消删除')
      }

      let data={}
      data['id']=row.id //等号右边的值需要修改
      data["type"]="unsigned"
      let res=await request(
          {
            url: "/AttendanceSheet/deletesupplierfile",
            method: "post",
            data:data
          }
      )
      await this.onload();
    },
    async deletepurchasefile1(index,row){
      const confirmResult =  await  this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        // 指定确认按钮的文本
        confirmButtonText: '确定',
        //指定取消按钮的文本
        cancelButtonText: '取消',
        //通过type指定提示信息前面的小图标
        type: 'warning'
      }).catch(err=>{
        // 这个捕获一下错误，要不然我们点击“取消”按钮之后控制台会报错
        return err
      })
      // console.log(confirmResult)

      if(confirmResult !=='confirm'){
        // 说明用户不想删除
        return this.$message.info('已取消删除')
      }

      let data={}
      data['id']=row.id //等号右边的值需要修改
      data["type"]="unsigned"
      let res=await request(
          {
            url: "/AttendanceSheet/deletepurchasefile",
            method: "post",
            data:data
          }
      )
      await this.onload();
    },
    async deletesupplierfile2(index,row){
      let data={}
      data['id']=row.id //等号右边的值需要修改
      data["type"]="signed"
      let res=await request(
          {
            url: "/AttendanceSheet/deletesupplierfile",
            method: "post",
            data:data
          }
      )
      if(res.data.code===200){
        this.$message({
          message:"删除成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"删除失败",
          type:"error"
        })
      }
      await this.onload();
    },
    async deletepurchasefile2(index,row){
      let data={}
      data['id']=row.id //等号右边的值需要修改
      data["type"]="signed"
      let res=await request(
          {
            url: "/AttendanceSheet/deletepurchasefile",
            method: "post",
            data:data
          }
      )
      if(res.data.code===200){
        this.$message({
          message:"删除成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"删除失败",
          type:"error"
        })
      }
      await this.onload();
    },
    handleChange1(file) {
      let that=this
      that.fileName1 = file.name;
      that.file1=file
      that.filelist1=[]
      that.filelist1[0]=file
    },
    handleChange2(file) {
      let that=this
      that.fileName2 = file.name;
      that.file2=file
      that.filelist2=[]
      that.filelist2[0]=file
    },
    async uploadsupplierfile(){
      if(this.filelist1[0]==null){
        this.$message({
          message:"请勿多次点击上传按钮或确保已选择了文件",
        })
        return
      }
      this.filelist1=[]
      if(this.file1.name.substring(this.file1.name.lastIndexOf('.')+1)!='pdf'){
        this.file1=null;
        this.ishide1=false;
        this.$message({
          type:"warning",
          message:"仅能上传pdf文件！"
        })
        return
      }
      let formData = new FormData();
      let that=this
      formData.append('uploadfile',that.file1.raw)
      formData.append('projectId',that.$route.query['projectId'])
      console.log('file',formData.get('uploadfile'))
      let res=await request({
        url: "/AttendanceSheet/uploadsupplierfile",
        method: "post",
        data:formData,
        onUploadProgress: progressEvent => {
          this.ishide1 = true
          let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
          this.percent1=process
          console.log("ing")
        }
      })
      if(res.data.code===200){
        this.$message({
          message:"上传成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"上传失败",
          type:"error"
        })
      }
      this.file1=null
      this.ishide1 = false
      await this.onload();
    },
    async uploadpurchasefile(){
      console.log(this.file2)
      if(this.filelist2[0]==null){
        this.$message({
          message:"请勿多次点击上传按钮或确保已选择了文件",
        })
        return
      }
      this.filelist2=[]
      if(this.file2.name.substring(this.file2.name.lastIndexOf('.')+1)!='pdf'){
        this.file2=null;
        this.ishide2=false;
        this.$message({
          type:"warning",
          message:"仅能上传pdf文件！"
        })
        return
      }
      let formData = new FormData();
      let that=this
      formData.append('uploadfile',that.file2.raw)
      formData.append('projectId',that.$route.query['projectId'])
      console.log('file',formData.get('uploadfile'))
      let res=await request({
        url: "/AttendanceSheet/uploadpurchasefile",
        method: "post",
        data:formData,
        onUploadProgress: progressEvent => {
          this.ishide2 = true
          let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
          this.percent2=process
          console.log("ing")
        }
      })
      if(res.data.code===200){
        this.$message({
          message:"上传成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"上传失败",
          type:"error"
        })
      }
      this.filelist2=[]
      this.file2=null
      this.ishide2 = false
      await this.onload();
    },

  },
    data() {

      return {
        supplierData1: [],
        supplierData2: [],
        purchaseData1:[],
        purchaseData2:[],
        filelist1:[],
        filelist2:[],
        fileName1: '',
        fileName2:'',
        file1:null,
        file2:null,
        ishide1:false,
        ishide2:false,
        ishide3:false,
        percent1:0,
        percent2:0,

      }
    }

}
</script>

<style scoped>

.inline-block {
  display: inline-block;
}
.el-header {
  background-color:rgb(255,255,255);
  color: #333;
  line-height: 60px;
}
.el-footer{
  background-color: rgb(255,255,255);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: rgb(255,255,255);
  color: #333;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.div2{
  margin-top: 50px;
  margin-bottom: 80px;
}
.div3{
  margin-top: 70px;
}
.div4{
  margin-top: 50px;
}
</style>
